<template>
    <div class="container">
      <h1 class="title">系统状态</h1>
      <p v-if="loading" class="loading-message">正在更新数据，请稍候...</p>
  
      <div v-if="!loading">
        <div class="section">
          <h2 class="section-title" @click="toggleSection('runningProcesses')">
            <span>正在运行的进程 ({{ runningProcesses.length }})</span>
            <span class="arrow" :class="{ 'rotated': isSectionOpen.runningProcesses }">▶</span>
          </h2>
          <ul v-show="isSectionOpen.runningProcesses">
            <li v-for="process in runningProcesses" :key="process.userId" class="process-item">
              <div class="field">用户名: <span>{{ process.userName }}</span></div>
              <div class="field">PID: <span>{{ process.pid }}</span></div>
              <div class="field">状态: <span>{{ process.isRunning ? '运行中' : '已停止' }}</span></div>
            </li>
          </ul>
        </div>
  
        <div class="section">
          <h2 class="section-title" @click="toggleSection('reconnectCounters')">
            <span>重连计数器 ({{ reconnectCounters.length }})</span>
            <span class="arrow" :class="{ 'rotated': isSectionOpen.reconnectCounters }">▶</span>
          </h2>
          <ul v-show="isSectionOpen.reconnectCounters">
            <li v-for="counter in reconnectCounters" :key="counter.userId" class="counter-item">
              <div class="field">用户名: <span>{{ counter.userName }}</span></div>
              <div class="field">重连次数: <span>{{ counter.reconnectCount }}</span></div>
            </li>
          </ul>
        </div>
  
        <div class="section">
          <h2 class="section-title" @click="toggleSection('manuallyStoppedProcesses')">
            <span>手动停止的进程 ({{ manuallyStoppedProcesses.length }})</span>
            <span class="arrow" :class="{ 'rotated': isSectionOpen.manuallyStoppedProcesses }">▶</span>
          </h2>
          <ul v-show="isSectionOpen.manuallyStoppedProcesses">
            <li v-for="process in manuallyStoppedProcesses" :key="process.userId" class="stopped-item">
              <div class="field">用户名: <span>{{ process.userName }}</span></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        runningProcesses: [],
        reconnectCounters: [],
        manuallyStoppedProcesses: [],
        loading: false,
        isSectionOpen: {
          runningProcesses: false,
          reconnectCounters: false,
          manuallyStoppedProcesses: false,
        },
      };
    },
    methods: {
      async fetchData() {
        this.loading = true;
        try {
          const response = await axios.post('http://42.194.158.131:4000/status');
          const data = response.data;
  
          this.runningProcesses = data.runningProcesses;
          this.reconnectCounters = data.reconnectCounters;
          this.manuallyStoppedProcesses = data.manuallyStoppedProcesses;
        } catch (error) {
          console.error('获取数据失败:', error);
        } finally {
          this.loading = false;
        }
      },
      toggleSection(section) {
        this.isSectionOpen[section] = !this.isSectionOpen[section];
      },
    },
    mounted() {
      this.fetchData();
      setInterval(this.fetchData, 40000); // 每 4 秒更新一次数据
    },
  };
  </script>
  
  <style>
  html, body {
  margin: 0; /* 去掉默认的 margin */
  padding: 0; /* 去掉默认的 padding */
  height: 100%; /* 设置高度为 100% */
  width: 100%; /* 设置宽度为 100% */
  background-color: #ffffff; /* 设置背景颜色 */
}
  
.container {
  width: 100%; /* 确保容器宽度为 100% */
  height: 100%; /* 确保容器高度为 100% */
  margin: 0; /* 去掉外边距 */
  padding: 20px; /* 添加内边距 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
  background-color: #ffffff; /* 设置背景颜色 */
}
  .title {
    text-align: center; /* 标题居中 */
    color: #007bff; /* 标题颜色 */
    margin-bottom: 20px; /* 标题下方间距 */
  }
  
  .loading-message {
    color: #007bff;
    font-weight: bold;
    text-align: center; /* 加载信息居中 */
  }
  
  .section {
    margin-bottom: 20px;
    background-color: #ffffff; /* 每个 section 背景为白色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 15px; /* 内边距 */
  }
  
  .section-title {
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中 */
    cursor: pointer;
    color: #333;
    font-size: 1.2em;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    transition: background-color 0.3s; /* 背景颜色过渡 */
  }
  
  .section-title:hover {
    background-color: #f1f1f1; /* 悬停时背景颜色变化 */
  }
  
  .arrow {
    transition: transform 0.3s ease; /* 添加过渡效果 */
  }
  
  .rotated {
    transform: rotate(90deg); /* 旋转箭头 */
  }
  
  ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .process-item, .counter-item, .stopped-item {
    margin-bottom: 10px; /* 每个项目之间的间距 */
  }
  
  .field {
    text-align: left; /* 确保每一行左对齐 */
    margin-bottom: 5px; /* 每个字段之间的间距 */
    color: #555; /* 字段颜色 */
  }
  </style>